@charset "utf-8";

@import url('reset.less');
@import url('../quote/color.less');
//组件依赖的外部图标库
@import "http://at.alicdn.com/t/font_335449_704tmvg9nqc.css";
/*common*/


/*M实验*/

/*@media screen and (max-width: 1200px) {
  html{font-size:20px;}
}
@media screen and (max-width: 550px) {
  html{font-size:14px;}
}
@media screen and (max-width: 420px) {
  html{font-size:13.4px;}
}
@media screen and (max-width: 380px) {
  html{font-size:12px;}
}
@media screen and (max-width: 370px) {
  html{font-size:10px;}
}*/

/*=============全局样式===============*/

body{font-size:1rem;}

/*@font-face
{
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
  url('Sansation_Light.eot'); !* IE9+ *!
}*/

// 标题样式
h1{font-size:22px;}
h2{font-size: 20px;}
h3{font-size: 18px;}
h4{font-size: 16px;}
h5{font-size: 14px;}

h1,h2,h3,h4,h5,h6{text-align: center}
h1{margin-bottom: 20px;}
//框架主样式




//基本表单元素
.form-input{
  display:inline-block;
  width:100%;

  min-height:32px;
  padding:0 5px;
  border: 1px solid @cc;
  border-radius: 4px;

  /*line-height: 1.42857143;*/
  background-color: @cf;
  background-image: none;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

  input&:focus{
    border: 1px solid @a;
    box-shadow: 0 0 1px 1px rgba(32,160,255,.075);
  }
}

//表单组
.form-group{
  display: inline-block;
  width: 160px;
  height:32px;
  vertical-align: middle;
}


//表单模块基本样式
.form-item{
  margin-bottom: 10px;
  .form-title{
    display: inline-block;
    min-width:80px;
    min-height: 32px;
    line-height: 32px;
    padding-right:8px;
    float: left;
    text-align: right;
    vertical-align: middle;
    i{margin-right:5px;color:@red-a;}
  }
  .form-content{
    position: relative;
    margin-left:80px;
    .label{display: inline-block;}
  }
}

//textarea
textarea{
  width:100%;
  height:130px;
  resize: vertical;
  padding:5px;
  min-height:60px;
  border: 1px solid @cc;
  font-family: 微软雅黑;
  outline: none;
}

.form .error{
  position: absolute;
  margin-top: 2px;
  font-size:12px;
  color:red;
}

//组件
.com-radio{
  display: inline-block;
  label{
    cursor: pointer;
    position: relative;
    input[type='radio']{display: none;}
    i,span{vertical-align: middle;color:@c6;}
  }
  .box-add{
    position: relative;
    background-color: @a;
    border:2px solid @a !important;
    &:after{
      width: 6px;
      height: 6px;
      border-radius: 100%;
      background-color: #fff;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
    }
  }
  .radio-box{
    position: relative;
    width:16px;
    height:16px;
    border-radius: 100%;
    border: 2px solid @cc;
    display: inline-block;
  }
}
.com-prompt{
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  display: none;

  .prompt-main{
    position: relative;
    width: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:#ffffff;
    border-radius: 6px;

    .prompt-tit{
      padding:6px 12px;
      border-bottom:1px solid @ceb;
      font-weight: bold;
      text-align: left;
    }
    .prompt-text{
      width:80%;
      padding:12px 0;
      margin:0 auto;
      font-size: 14px;
    }
    //按钮组
    .prompt-item{
      padding:14px 0;
      .prompt-button{
        display: inline-block;
        margin:0 12px;
        padding:5px 24px;
        border-radius: 4px;
        cursor: pointer;
        color:#fff;
        &:first-child{
          background-color:@cc;
        }
        &:last-child{
          background-color:@a;
        }
      }
    }
  }
}


